<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .required{
            color: red;
            margin: 0 5px;
        }
    </style>
    <style>
        .upload-field{
            display: none;
        }
        .img-list{
            display: flex;
            flex-wrap: wrap;
        }
        .img-list .img-item{
            height: 120px;
            width: 120px;
            position: relative;
            margin: 10px;
        }
        .img-list .img-item:hover .img-opt{
            display: flex;
        }
        .img-list .img-item img{
            display: block;
            height: 100%;
            width: 100%;
        }
        .img-list .img-item .img-opt{
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.3);
            display: none;
            align-items: center;
            justify-content: center;
        }
        .img-list .img-item .img-opt i{
            color: white;
            cursor: pointer;
            font-size: 26px;
            margin: 10px;
        }
    </style>
</head>
<body style="padding: 15px">
<div class="layui-container">
    <form class="layui-form" id="dataForm" lay-filter="dataForm">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label"><span class="required">*</span>用户名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="username" id="username" placeholder="请输入用户名" lay-verify="required" lay-reqtext="用户名不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="nickname" class="layui-form-label"><span class="required">*</span>昵称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="nickname" id="nickname" placeholder="请输入昵称" lay-verify="required" lay-reqtext="昵称不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" lay-verify="phone" class="layui-input" name="phone" id="phone" placeholder="请输入手机号">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="role" class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="role" id="role">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="departmentId" class="layui-form-label"><span class="required">*</span>部门</label>
            <div class="layui-input-block">
                <select name="departmentId" id="departmentId">
                    <option value="1">部门1</option>
                    <option value="2">部门2</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="status" class="layui-form-label"><span class="required">*</span>状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value="1">可用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="avatar" class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <input type="hidden" class="layui-input" name="avatar" id="avatar">
                <button type="button" class="layui-btn upload-btn" data-key="avatar">上传图片</button>
                <fieldset class="layui-elem-field upload-field">
                    <legend>电影封面</legend>
                    <div class="layui-field-box img-list">

                    </div>
                </fieldset>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    /*form 和 table：用于存储 Layui 框架中的表单和表格模块的实例，后续会对其进行赋值*/
    var form,table;
    /*uploadImageInfo：一个对象，用于存储图片上传的相关信息，包括单张图片（src）和多张图片（imgs）的名称列表和数量限制。*/
    const uploadImageInfo = {
        /*src 表示单张图片的上传信息*/
        src:{
            /*图片名称集合*/
            list:[],
            /*限制图片数量*/
            size:1
        },
        /*imgs 表示多张图片的上传信息。每个子对象包含 list（图片名称集合）和 size（限制图片数量）*/
        imgs:{
            list:[],
            size:5
        }
    }
    const dataId = sessionStorage.getItem("dataId") || "";
    $(function () {
        layui.use(function () {
            /*获取 Layui 的表单模块实例*/
            form= layui.form;
            /*把 Layui 的上传模块赋值给变量 upload，用于处理图片上传。*/
            let upload = layui.upload;
            getRoleSelect();
            /*监听表单提交事件，当表单提交按钮的 lay-filter 属性值为 save 时触发回调函数*/
            form.on("submit(save)",function ({field}) {
                $.ajax({
                    /*地址*/
                    url:"userinfo",
                    data:{
                        /*执行的操作*/
                        param:"update",
                        id: dataId,
                        ...field
                    },
                    method:"post",
                    dataType: "json",
                    success(res){
                        if (res.code===200){
                            layer.msg('操作成功！',{icon:6},function () {
                                var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                                parent.layer.close(index); // 再执行关闭
                                /*刷新list页面的table*/
                                parent.table.reload('dataTable');
                            });
                        }else {
                            /*弹窗显示失败*/
                            layer.alert(res.msg)
                        }
                    }
                });
                return false;
            });
            upload.render({
                /*上传按钮的选择器为 .upload-btn*/
                elem:".upload-btn",
                url:"upload",
                /*设置允许上传的文件类型，默认为image*/
                accept:"image",
                /*设置文件选择时可以看到的文件类型*/
                acceptMime:"image/*",
                /*设置允许上传的文件大小*/
                size:1024*20,
                /*上传时携带的参数*/
                data:{
                    type:"project"
                },
                /*上传成功的回调函数*/
                done(res){
                    if(res.code === 200){
                        /*查找上传按钮所在的表单项父元素 $parents。·*/
                        let $parents = this.item.parents(".layui-form-item");
                        let key = this.item.data("key");
                        const list = uploadImageInfo[key].list;
                        const size = uploadImageInfo[key].size;
                        if(list.length>=size){0
                            parent.layer.msg("最多上传["+size+"]张图片！",{icon:5});
                            return;
                        }
                        list.push(res.data.fileName);
                        setImage(list,$parents);
                    }
                }
            });
        })
    })
    /**
     * 处理页面图片
     * @param list  图片名称集合
     * @param $parents  图片所在父级的div
     */
    function setImage(list,$parents) {
        let $html='';
        for(let imgName of list){
            $html += '<div class="img-item"><img src="'+imgName+'" alt=""><div class="img-opt"><i class="layui-icon layui-icon-eye" title="点击查看详情" onclick="showImg(\''+imgName+'\')"></i><i class="layui-icon layui-icon-delete" title="点击删除图片" onclick="deleteImg(this)"></i></div></div>';
        }
        /*将生成的 HTML 字符串添加到 .img-list 元素中。*/
        $parents.find(".img-list").empty().append($html);/*渲染图片内容*/
        $parents.find("input[type='hidden']").val(list);/*存储表单内容*/
        if(list.length>0){
            $parents.find(".upload-field").show();/*展示图片区域*/
        }else{
            $parents.find(".upload-field").hide();/*隐藏图片区域*/
        }
    }
    function getFormData() {
        /*如果 dataId 存在，则发送 GET 请求到 movieInfo 接口，获取已有数据。*/
        if(dataId){
            /*获取后立即删除*/
            sessionStorage.removeItem("dataId");
            $.ajax({
                url:"movieInfo",
                data:{
                    param:"info",
                    id:dataId
                },
                method: "get",
                success(res) {
                    if(res.code === 200){
                        /*使用 form.val 方法填充表单数据。*/
                        form.val('dataForm',res.data);

                        /*处理单张图片和多张图片的显示，将图片名称添加到 uploadImageInfo 中，并调用 setImage 函数渲染图片。*/

                        // 处理图片
                        uploadImageInfo.src.list=[res.data.src];
                        let $srcParents = $("#src").parents(".layui-form-item");
                        setImage(uploadImageInfo.src.list,$srcParents);

                        /*处理多图片*/
                        let piList = res.data.moviesPosterList.map(item=>item.src);
                        uploadImageInfo.imgs.list=[...piList];
                        let $imgsParents = $("#imgs").parents(".layui-form-item");
                        setImage(uploadImageInfo.imgs.list,$imgsParents);

                    }
                }
            })
        }
    }
    /*该函数用于弹出一个层，显示图片详情*/
    function showImg(imgSrc) {
        parent.layer.open({
            type:1,
            title:"图片详情",
            area:["500px","auto"],
            content:'<a href="'+imgSrc+'" title="点击查看原图" target="_blank"><img style="display: block;max-width: 100%;height: auto;" src="'+imgSrc+'"></a>'
        });
    }
    /*该函数用于删除图片*/
    function deleteImg(_this){
        parent.layer.confirm('确定删除该图片吗?',{icon:3,title:"删除图片"},function (index) {
            /*获取图片所在div*/
            let $imgItem = $(_this).parents(".img-item");
            /*根据图片div的下标来删除数组的对应内容*/
            let i = $imgItem.index();
            /*获取当前按钮所在的div*/
            let $parents = $(_this).parents(".layui-form-item");
            /*获取当前删除图片的上传按钮*/
            let uploadBtn = $parents.find(".upload-btn");
            /*获取key*/
            let key = uploadBtn.data("key");
            uploadImageInfo[key].list.splice(i,1);
            setImage(uploadImageInfo[key].list,$parents)
            parent.layer.close(index);
        })
    }
    function getRoleSelect() {
        $.ajax({
            url:"role",
            data:{
                param:"select"
            },
            method:"get",
            dataType:"json",
            success(res){
                if (res.code === 200){
                    let $html = '';
                    for (let r of res.data){
                        /*动态生成 <option> 标签，并添加到 #roleId 选择框中*/
                        $html+='<option value="'+r.id+'">'+r.roleName+'</option>'
                    }
                    /*empty()调用该方法会移除被选中元素的所有子节点*/
                    /*append()将指定的内容追加到被选中元素的末尾*/
                    $("#roleId").empty().append($html);
                    /*重新渲染表单中的select标签,不设置的的话,下拉框无法实现*/
                    form.render('select');
                    /*判断是否修改*/
                    if (dataId){
                        /*设置username为只读不可修改*/
                        $("#username").prop("readonly",true)
                        /*获取后立即删除*/
                        sessionStorage.removeItem("dataId");
                        $.ajax({
                            url: "userinfo",
                            data: {
                                param:"info",
                                id:dataId
                            },
                            method: "get",
                            success(res) {
                                if (res.code===200){
                                    form.val('dataForm',res.data)
                                }
                            }
                        })
                    }
                }
            }
        })
    }
</script>
</html>
